function FROZEN_ROWS_BORDER_COLOR (args) {
  const {
    row,
    grid: { frozenRowCount }
  } = args
  if (frozenRowCount - 1 === row) {
    return ['#E8E8E8', '#E8E8E8', '#E8E8E8', '#E8E8E8']
  } else {
    return ['#E8E8E8']
  }
}

function BORDER_COLOR (args) {
  const {
    col,
    grid: { colCount, frozenColCount }
  } = args
  if (frozenColCount - 1 === col) {
    return ['#E8E8E8', '#E8E8E8', '#E8E8E8', '#E8E8E8']
  } else if (colCount - 1 === col) {
    return ['#E8E8E8', '#E8E8E8', '#E8E8E8', '#E8E8E8']
  } else {
    return ['#E8E8E8', '#E8E8E8']
  }
}

const userTheme = {
  frozenRowsBgColor: '#FAFAFA',
  frozenRowsBorderColor: FROZEN_ROWS_BORDER_COLOR,
  frozenRowsColor: '#595959',
  borderColor: BORDER_COLOR,
  selectionBgColor: '#F4FBFF',
  highlightBorderColor: '#5E9ED6',
  defaultRowHeight: 40,
  font: '12px Arial,"PingFang SC","Microsoft YaHei","微软雅黑","黑体","宋体",sans-serif'
}

export default userTheme

export function getSelectStyle (id, recId, type = 'center') {
  if (!id) {
    return {
      padding: [0, 8],
      textOverflow: 'ellipsis',
      textAlign: type
    }
  }
  if (type === 'left' || type === 'right') {
    return {
      bgColor: id === recId ? '#F4FBFF' : '',
      // color: id === recId ? '#008cd6' : '',
      padding: [0, 8],
      textOverflow: 'ellipsis',
      textAlign: type
    }
  }
  return {
    bgColor: id === recId ? '#F4FBFF' : '',
    // color: id === recId ? '#008cd6' : '',
    padding: [0, 8],
    textOverflow: 'ellipsis',
    textAlign: type
  }
}

export function getTreeSelectStyle (id, recId, type = 'left') {
  return {
    bgColor: id === recId ? '#F4FBFF' : '',
    color: id === recId ? '#008cd6' : '',
    textAlign: type
  }
}

export const centerStyle = {
  textAlign: 'center'
}

export const leftStyle = {
  padding: [0, 10, 0, 10]
}

export function statusCol (value, width = '40px') {
  const colorLists = [
    {
      status: 0,
      value: '异常',
      color: '#fff',
      bgColor: '#F57A79',
      fontSize: '10px'
    },
    {
      status: 1,
      value: '正常',
      color: '#fff',
      bgColor: '#1FBF6A',
      fontSize: '10px'
    },
    {
      status: 2,
      value: '未开始',
      color: '#fff',
      bgColor: '#BFBFBF',
      fontSize: '9px'
    }
  ]
  const bgColor = colorLists.find(item => item.status === value)?.bgColor
  const color = colorLists.find(item => item.status === value)?.color
  const fontSize = colorLists.find(item => item.status === value)?.fontSize
  return {
    svg: `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
   width="${width}" x="0px" y="0px" viewBox="0 0 31.75 17.5">
   <path fill="${bgColor ||
      '#fff'}" d="M2.98,0h25.8c1.64,0,2.98,1.68,2.98,3.75v10c0,2.07-1.33,3.75-2.98,3.75H2.98C1.33,17.5,0,15.82,0,13.75v-10
    C0,1.68,1.33,0,2.98,0z"/><text transform="matrix(1 0 0 1 16 12.295)" text-anchor='middle' style="font-size:${fontSize ||
      '10px'};" fill="${color || '#000'}">
    ${colorLists.find(item => item.status === value)?.value ||
      value}</text></svg>`
  }
}

export function bubbleIcon (value = '', options = { width: null, color: '#fff', bgColor: '#F57A79', fontSize: '10px' }) {
  return {
    svg: `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
   width="${options.width || '25px'}" viewBox="0 0 27 16">
   <path fill="${options.bgColor}" d="M19,16H8c-4.4,0-8-3.6-8-8v0c0-4.4,3.6-8,8-8h11c4.4,0,8,3.6,8,8v0C27,12.4,23.4,16,19,16z"/>
   <text transform="matrix(1 0 0 1 13 11)" text-anchor='middle' style="font-size:${options.fontSize};" fill="${options.color}">${value}</text>
   </svg>`
  }
}